<template>
  <el-card>
    <div class="cardtop">
      <p class="title" style="margin:0 0 0px">
        <span>平台应用</span>
      </p>
    </div>
    <div v-for="(item,index) in servesList" :key="index" class="relativebox">
      <p class="title2"><span class="line" /> {{ item.appTypeName }}</p>
      <div class="listbox">
        <!--使用draggable组件 v-model绑定数组-->
        <draggable v-model="item.appList" :disabled="!isedit" @start="onStart" @end="onEnd">
          <transition-group class="listgroup">
            <div v-for="i in item.appList" :key="i.appName+'1'" class="itembox" :class="isedit?'itemActive':''" @click="iscustom?'':goServe(i)">
              <p class="logobox">
                <appIcon :icon-type="i.iconType" :app-icon="i.appIcon" :active-color="i.iconColor" />
                <span style="margin-left:13px">{{ i.appName }}</span>
              </p>
              <el-tooltip v-if="i.remark.length>40" class="item" effect="dark" :content="i.remark " placement="bottom">
                <p class="content">{{ i.remark }}</p>
              </el-tooltip>
              <p v-else class="content">{{ i.remark }}</p>
            </div>
          </transition-group>
        </draggable>
      </div>
    </div>
  </el-card>
</template>
<script >
import appIcon from '@/views/system/appType/components/appIcon.vue'
import { getUserEnableList } from "@/api/system/app";
import router from '@/router'
import draggable from 'vuedraggable'
export default {
  components: {
    draggable, appIcon
  },
  props: {
    iscustom: {
      default: false,
      type: Boolean
    }
  },
  data() {
    return {
      drag: false,
      isedit: false,
      servesList: [],
    }
  },
  created() {
    this.getServesMenuList()
  },
  methods: {
    getServesMenuList() {
      getUserEnableList().then(response => {
        this.servesList = response.data;
      });
    },
    onStart() {
      this.drag = true
    },
    onEnd() {
      this.drag = false
    },
    async  goServe(item) {
      if (item.appSource == 1) {
        localStorage.setItem('INTELLIGENT_PLANTFORM_SYSTEM_APP_CODE', item.appCode) // 跳转新页签传值
        var path = "/index"
        if (item.openNewTag == 1) {
          await this.$store.dispatch('GenerateRoutes').then(accessRoutes => {
            // 根据roles权限生成可访问的路由表
            router.addRoutes(accessRoutes) // 动态添加可访问路由表
          })
          // 全部关闭tab,重定向首页
          this.$tab.closeAllPage()
          this.$router.push({ path: `${path}` })
        } else {
          window.open(path, '_blank')
        }
      } else {
        // appsource是2的代表需要根据应用地址往外跳
        window.open(item.appAddress, '_blank')
      }
    }

  }

}
</script>
<style lang="scss" scoped>
.cardtop{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 40px;
        .editbtn{
          // margin-right: 30px;
        }
        .title{
            font-size: 18px;
            font-family: PingFang SC-中黑体, PingFang SC;
            font-weight: 500;
            color: #131414;
            display: flex;
    align-items: center;
            i{
              cursor: pointer;
            }
            .cancel{
              margin-right: 8px;
            }
        }
    }
.relativebox{
  position: relative;
  .positiontips{
    position: absolute;
    left: -24px;
    top: 0;
  }
}
  .title2{
    font-size: 16px;
    font-weight: 400;
    color: #131414;
    line-height: 22px;
    display: flex;
    align-items: center;
    margin: 0px 0 24px;
    // justify-content: space-between;
    .line{
      width: 3px;
      height: 15px;
      background: linear-gradient(180deg, #6A5DFF 0%, #264FE1 100%);
      border-radius: 4px 4px 4px 4px;
      margin-right: 8px;
    }
  }
  .listbox .listgroup{
   display: flex;
   align-items: center;
   flex-wrap: wrap;
  //  justify-content: space-between;
    .itembox:nth-of-type(4n){
        margin-right: 0;
    }
    .itembox{
      cursor: pointer;
      width:23.3%;
      height: 130px;
      border-radius: 12px 12px 12px 12px;
      background: #FFFFFF;
      border: 1px solid #EBEEF5;
      display: flex;
      flex-direction: column;
      // align-items: center;
      padding: 16px;
      margin-bottom: 24px;
      box-sizing: border-box;
      margin-right:2%;
      .logobox{
        margin: 0;
        display: flex;
        align-items: center;
        font-size: 16px;
       font-weight: 500;
       margin-bottom: 10px;
       color: #131414;
        .itemlogo{
          margin: 0;
          width: 48px;
          height: 48px;
          margin-right: 12px;
        }
      }
      .content{
        margin: 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-size: 12px;
        line-height: 17px;
        font-weight: 400;
        color: #646A73;
        line-height: 20px;
        word-wrap: break-word;
      }
    }
    .itembox:hover{
      background: #F2F4F7;
      border: none;
    }
    .itemActive{
      border:1px dashed #3461FF;
    }
     .itemActive:hover{
      background: #F2F4F7;
      border: none;
    }
  }
</style>
